<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/js/Grid/css/grid.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/Grid/js/grid.js"></script>
    <style>
        tr.select-row,
        tr.select-row:hover {
            background-color: #0b55b3f5 !important;
            color: #fff;
        }
    </style>
    <script>
        window.addEventListener("message", evt => {
            var data = evt.data;
            table = data.table;
            filter = data.filter;
            loadGrid();
        });
    </script>
</head>

<body>
    <div id="grid"></div>
    <script>
        var struct, table, filter;
        var data;
        var gridColumns;
        function initGrid() {
            var height = document.body.clientHeight - 50 - 10 - 35;
            gridColumns = new Grid("grid", {
                isFixHead: true,
                sizeColumn: true,
                minWidth: 700,
                height: height,
                isPage: true,
                colWidths: "auto",
                pageSize: 50,
                pageSizeList: [10, 20, 50, 100],
                headArr: [[]],
                columnArr: [],
                onQuery: function (pageIndex, pageSize, orders) {
                    queryData(pageIndex, pageSize);
                },
                onRowClick: function (rowdata, row, index) {
                    console.log(rowdata, row, index);
                    $(row).toggleClass("select-row");
                }
            });
            var columns = struct.columns;
            columns.map(col => {
                gridColumns.headArr[0].push({ text: col.name });
                gridColumns.columnArr.push({
                    type: "lab", title: col.name, name: col.name
                });
            });
            queryData(1, 50);
        }
        function queryData(pageIndex, pageSize) {
            var primaryKey = struct.primaryKey;
            if (!primaryKey) {
                primaryKey = struct.columns[0].name;
            }
            showLoading();
            $.post("/api/mysqlmanage/GetTableData", { table, orderKey: primaryKey, pageIndex, pageSize, filter }, function (res) {
                if (res.success) {
                    data = res.data.list;
                    gridColumns.init({ data, count: res.data.totalCount });
                } else {
                    alert(res.message);
                }
            }).always(hideLoading);

        }
        function loadGrid() {
            showLoading();
            $.post("/api/mysqlmanage/GetTableDetail", { table }, function (res) {
                struct = res.data;
                initGrid();
            }).always(hideLoading);
        }
    </script>
</body>

</html>